<template>
  <div>
    <!-- 下拉容器*此组件内部请求api，如要多个请创建多个该组件 -->
    <vxe-form-item
      field="xsown"
      :title="dcTitleName"
      span="8"
    >
      <vxe-pulldown ref="xDown4" transfer>
        <template v-slot>
          <vxe-input
            v-model="value"
            suffix-icon="fa fa-search"
            :placeholder="dcPlaceholder"
            @keyup="keyupEvent"
            @focus="focusEvent"
            @suffix-click="suffixClick"
          ></vxe-input>
        </template>
        <template v-slot:dropdown>
          <div class="my-dropdown4">


            <vxe-grid
              id="2323"
              rowId='id'
              size="mini"
              highlight-hover-row
              stripe
              align="center"
              border="outer"
              show-overflow
              :checkbox-config="{showHeader:true,trigger:'row',reserve:true,highlight:true}"
              auto-resize
              height="300"
              :loading="loading"
              :pager-config="tablePage"
              :data="tableData"
              :columns="tableColumn"
              @page-change="pageChangeEvent"
              @checkbox-change="checkboxClick"
              @checkbox-all="checkboxClickAll"
            >


              <!--使用 form 插槽-->
              <template v-slot:form>
                <vxe-form :data="formData" @submit="searchEvent" class="newform">
                  <vxe-form-item title="名称" field="name" span="8">
                    <template v-slot>
                      <vxe-input v-model="formData.name" placeholder="请输入名称" clearable></vxe-input>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item title="昵称" field="nickname" span="8">
                    <template v-slot>
                      <vxe-input v-model="formData.nickname" placeholder="请输入昵称" clearable></vxe-input>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item title="性别" field="sex" span="8">
                    <template v-slot>
                      <vxe-select v-model="formData.sex" placeholder="请选择性别" clearable>
                        <vxe-option value="1" label="女"></vxe-option>
                        <vxe-option value="2" label="男"></vxe-option>
                      </vxe-select>
                    </template>
                  </vxe-form-item>
                  <vxe-form-item
                    span="24"
                    align="center"
                    :item-render="{name: 'ElButtons', children: [{ content: $t('base.search'), props: {type: 'primary', nativeType: 'submit',size:'mini'} }, { content: $t('base.reset'), props: {nativeType: 'reset',size:'mini'} }]}"
                  >
                  </vxe-form-item>
                </vxe-form>
              </template>


            </vxe-grid>
          </div>
        </template>
      </vxe-pulldown>
    </vxe-form-item>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'SearchFormDropdContDemoItem',
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {
      // 测试功能-下拉容器-实现分页表格--------开始
      // input的值
      value: '',
      // 表格的字段
      tableColumn: [
        {type: 'checkbox'},
        {type: 'seq'},
        {field: 'id', title: 'id'},
        {field: 'name', title: 'Name'},
        {field: 'role', title: 'Role'},
        {field: 'sex', title: 'Sex'},
      ],
      formData: {
        name: '',
        nickname: '',
        sex: ''
      },
      // 表格加载数据loading
      loading: false,
      // 表格数据
      tableData: [],
      // 示例填充数据
      tableList: [
        {id: 1, name: 'Test1', role: '前端', sex: '男'},
        {id: 2, name: 'Test2', role: '后端', sex: '男'},
        {id: 3, name: 'Test3', role: '测试', sex: '男'},
        {id: 4, name: 'Test4', role: '设计师', sex: '女'},
        {id: 5, name: 'Test5', role: '前端', sex: '男'},
        {id: 6, name: 'Test6', role: '前端', sex: '男'},
        {id: 7, name: 'Test7', role: '前端', sex: '男'}
      ],
      // 分页设置
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      // 测试功能-下拉容器-实现分页表格--------结束
    }
  },
  props: {
    // title
    dcTitleName: {
      type: String
    },
    // Placeholder提示
    dcPlaceholder: {
      type: String
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {
    value(newVal) {
      // 监听value值变化，回传父组件
      this.$emit("dtValueChangeEmit", newVal);
    }
  },
  // 方法集合
  methods: {
    /* 下拉容器-start */
    // 输入框获取焦点
    focusEvent() {
      this.$refs.xDown4.showPanel()
    },
    // 点击input尾部图标触发事件
    suffixClick() {
      this.$refs.xDown4.togglePanel()
    },
    /* 检索 */
    searchEvent() {
      console.log("下拉容器搜素事件");
    },
    // 加载表格数据
    keyupEvent() {
      const {value} = this
      console.log('检索框的值', value);
      this.loading = true
      setTimeout(() => {
        this.loading = false
        if (value) {
          // 此处可换为api请求
          this.tableData = this.tableList.filter(row => row.name.indexOf(value) > -1)
        } else {
          // 此处可换为api请求
          this.tableData = this.tableList.slice(0)
        }
      }, 100)
    },

    // 表格行点击事件（弃用）
    /* cellClickEvent4 ({ row }) {
      this.value = row.name
      this.$refs.xDown4.hidePanel()
    }, */
    // 分页改变事件
    pageChangeEvent({currentPage, pageSize}) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
    },
    // 选中或取消选中
    checkboxClick({records}) {
      this.value = records.map(item => item.name).join()
      // this.$refs.xDown4.hidePanel()
      console.log('checkboxClick::', this.value)
    },
    // 全选
    checkboxClickAll({records}) {
      this.value = records.map(item => item.name).join()
      console.log('checkboxClick::', this.value)
    },
    /* 下拉容器-end */

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.keyupEvent()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.newform {
  padding: 0 10px;
}
</style>